<script setup lang="ts">
import { ref } from 'vue';

const ikuns = ref(['ikun1号', 'ikun2号', 'ikun3号', 'ikun4号', 'ikun5号'])
const obj = ref({
  name: 'ikun',
  age: 18,
  sex: '男'
})
</script>
<template>
  <!-- 列表渲染 -->
  <p v-for="(item, index) in ikuns" :key="item">{{ index + 1 }}号位：{{ item }}</p>

  <!-- 
       ul 无序列表，前面有装饰小圆点
       ol 有序列表，前面有数字序号

       :key="item"  作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
    -->
  <ol>
    <!-- 如果 index 用不上，可以省略不写 -->
    <li v-for="item in ikuns" :key="item">{{ item }}</li>
  </ol>

  <!-- 通过Array.from({ length: 5 })生成固定长度的数组，用于生成指定数量的测试结构 -->
  <ol>
    <li v-for="item in Array.from({ length: 5 })">测试结构</li>
  </ol>

  <!-- 循环数字，可以快速生成指定数量的测试结构，比上一种方便 -->
  <ol>
    <li v-for="item in 5">测试结构</li>
  </ol>

  <!-- 支持对象循环遍历，遍历对象的键值对，了解即可 -->
  <ul>
    <li v-for="(value, key, index) in obj">{{ index }} {{ key }} {{ value }}</li>
  </ul>
</template>
<style scoped></style>